<template>
  <div class="diagnosis-step">
    <div class="form-section">
      <el-form :model="diagnosisForm" label-width="120px">
        <el-form-item label="报告类型">
          <el-radio-group v-model="diagnosisForm.type">
            <el-radio label="full">完整报告</el-radio>
            <el-radio label="brief">简要报告</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="报告内容">
          <el-checkbox-group v-model="diagnosisForm.sections">
            <el-checkbox label="patientInfo">患者信息</el-checkbox>
            <el-checkbox label="imageAnalysis">影像分析</el-checkbox>
            <el-checkbox label="measurements">测量数据</el-checkbox>
            <el-checkbox label="conclusion">诊断结论</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="医生建议">
          <el-input
            v-model="diagnosisForm.doctorNotes"
            type="textarea"
            rows="4"
            placeholder="请输入医生建议..."
          />
        </el-form-item>
      </el-form>

      <div class="form-actions">
        <el-button type="primary" @click="handleGenerate">
          生成报告
        </el-button>
        <el-button @click="handlePreview" :disabled="!store.diagnosis">
          预览报告
        </el-button>
      </div>
    </div>

    <div class="preview-section" v-if="store.diagnosis">
      <h3>报告预览</h3>
      <div class="preview-content">
        <div class="report-header">
          <h2>医学诊断报告</h2>
          <p>生成时间：{{ formatDate(store.diagnosis.generatedTime) }}</p>
        </div>
        
        <div class="report-body" v-html="store.diagnosis.content"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useWorkflowStore } from '@/stores/workflow'
import { ElMessage } from 'element-plus'

const store = useWorkflowStore()

const diagnosisForm = ref({
  type: 'full',
  sections: ['patientInfo', 'imageAnalysis', 'measurements', 'conclusion'],
  doctorNotes: ''
})

const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleString()
}

const generateReportContent = () => {
  // 这里是一个示例的报告生成逻辑
  const sections: string[] = []
  
  if (diagnosisForm.value.sections.includes('patientInfo')) {
    sections.push(`
      <h3>患者信息</h3>
      <p>姓名：张三</p>
      <p>年龄：45岁</p>
      <p>性别：男</p>
    `)
  }
  
  if (diagnosisForm.value.sections.includes('imageAnalysis')) {
    sections.push(`
      <h3>影像分析</h3>
      <p>影像类型：CT扫描</p>
      <p>扫描部位：胸部</p>
      <p>分析结果：未见明显异常</p>
    `)
  }
  
  if (diagnosisForm.value.sections.includes('measurements')) {
    sections.push(`
      <h3>测量数据</h3>
      <p>肺部体积：2450ml</p>
      <p>密度分布：正常范围</p>
    `)
  }
  
  if (diagnosisForm.value.sections.includes('conclusion')) {
    sections.push(`
      <h3>诊断结论</h3>
      <p>根据影像学检查结果，患者肺部组织结构正常，未见明显病变。</p>
      <h3>医生建议</h3>
      <p>${diagnosisForm.value.doctorNotes || '无特殊建议'}</p>
    `)
  }
  
  return sections.join('')
}

const handleGenerate = () => {
  const content = generateReportContent()
  store.setDiagnosis(content)
  ElMessage.success('报告生成成功！')
}

const handlePreview = () => {
  // 可以在这里添加预览逻辑，比如打开新窗口或显示预览模态框
  ElMessage.info('预览功能开发中...')
}
</script>

<style scoped>
.diagnosis-step {
  height: 100%;
  display: flex;
  gap: 20px;
}

.form-section {
  flex: 1;
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.form-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.preview-section {
  flex: 1;
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: auto;
}

.preview-section h3 {
  margin-bottom: 20px;
  font-size: 16px;
  color: #303133;
}

.preview-content {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 4px;
}

.report-header {
  text-align: center;
  margin-bottom: 30px;
}

.report-header h2 {
  margin-bottom: 10px;
}

.report-body {
  line-height: 1.6;
}

.report-body :deep(h3) {
  margin: 20px 0 10px;
  color: #409EFF;
}

.report-body :deep(p) {
  margin: 5px 0;
  color: #606266;
}
</style> 